// ECharts 科技风格主题配置

export const techTheme = {
  color: [
    '#00f3ff', // 青色霓虹
    '#ff00ff', // 紫色霓虹
    '#00ff88', // 绿色霓虹
    '#ffaa00', // 橙色
    '#ff3366', // 红色
    '#00ccff', // 浅蓝
    '#cc00ff', // 深紫
    '#66ff00'  // 黄绿
  ],
  backgroundColor: 'transparent',
  textStyle: {
    color: '#ffffff',
    fontFamily: 'Orbitron, Inter, sans-serif'
  },
  title: {
    textStyle: {
      color: '#00f3ff',
      fontSize: 18,
      fontWeight: 'bold'
    },
    subtextStyle: {
      color: '#8892b0',
      fontSize: 12
    }
  },
  line: {
    smooth: true,
    symbol: 'circle',
    symbolSize: 6,
    lineStyle: {
      width: 2,
      shadowColor: 'rgba(0, 243, 255, 0.5)',
      shadowBlur: 10
    },
    areaStyle: {
      opacity: 0.3
    },
    emphasis: {
      focus: 'series',
      lineStyle: {
        width: 3
      }
    }
  },
  bar: {
    itemStyle: {
      borderRadius: [4, 4, 0, 0],
      shadowColor: 'rgba(0, 243, 255, 0.5)',
      shadowBlur: 10
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 20,
        shadowColor: 'rgba(0, 243, 255, 0.8)'
      }
    }
  },
  pie: {
    itemStyle: {
      borderColor: '#0a0e27',
      borderWidth: 2,
      shadowColor: 'rgba(0, 243, 255, 0.3)',
      shadowBlur: 10
    },
    label: {
      color: '#ffffff',
      fontSize: 12
    },
    labelLine: {
      lineStyle: {
        color: '#8892b0'
      }
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 20,
        shadowColor: 'rgba(0, 243, 255, 0.8)'
      }
    }
  },
  scatter: {
    itemStyle: {
      shadowColor: 'rgba(0, 243, 255, 0.5)',
      shadowBlur: 10
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 20
      }
    }
  },
  gauge: {
    itemStyle: {
      color: '#00f3ff',
      shadowColor: 'rgba(0, 243, 255, 0.5)',
      shadowBlur: 10
    },
    axisLine: {
      lineStyle: {
        color: [
          [0.3, '#00ff88'],
          [0.7, '#00f3ff'],
          [1, '#ff00ff']
        ],
        width: 10
      }
    },
    axisTick: {
      lineStyle: {
        color: '#8892b0'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisLabel: {
      color: '#ffffff'
    },
    detail: {
      color: '#00f3ff',
      fontSize: 24,
      fontWeight: 'bold'
    }
  },
  radar: {
    axisLine: {
      lineStyle: {
        color: '#495670'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#495670'
      }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(26, 31, 58, 0.3)', 'rgba(26, 31, 58, 0.1)']
      }
    },
    axisName: {
      color: '#ffffff'
    }
  },
  grid: {
    borderColor: 'rgba(255, 255, 255, 0.1)',
    containLabel: true,
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '10%'
  },
  categoryAxis: {
    axisLine: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisTick: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisLabel: {
      color: '#8892b0'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.05)'
      }
    }
  },
  valueAxis: {
    axisLine: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisTick: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisLabel: {
      color: '#8892b0'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
        type: 'dashed'
      }
    }
  },
  logAxis: {
    axisLine: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisTick: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisLabel: {
      color: '#8892b0'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)'
      }
    }
  },
  timeAxis: {
    axisLine: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisTick: {
      lineStyle: {
        color: '#495670'
      }
    },
    axisLabel: {
      color: '#8892b0'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)'
      }
    }
  },
  toolbox: {
    iconStyle: {
      borderColor: '#00f3ff'
    },
    emphasis: {
      iconStyle: {
        borderColor: '#ff00ff'
      }
    }
  },
  legend: {
    textStyle: {
      color: '#ffffff'
    },
    pageIconColor: '#00f3ff',
    pageIconInactiveColor: '#495670',
    pageTextStyle: {
      color: '#8892b0'
    }
  },
  tooltip: {
    backgroundColor: 'rgba(26, 31, 58, 0.95)',
    borderColor: '#00f3ff',
    borderWidth: 1,
    textStyle: {
      color: '#ffffff'
    },
    axisPointer: {
      lineStyle: {
        color: '#00f3ff',
        width: 1
      },
      crossStyle: {
        color: '#00f3ff',
        width: 1
      }
    }
  },
  timeline: {
    lineStyle: {
      color: '#495670'
    },
    itemStyle: {
      color: '#00f3ff'
    },
    controlStyle: {
      color: '#00f3ff',
      borderColor: '#00f3ff'
    },
    checkpointStyle: {
      color: '#ff00ff',
      borderColor: '#ff00ff'
    },
    label: {
      color: '#8892b0'
    },
    emphasis: {
      itemStyle: {
        color: '#ff00ff'
      },
      controlStyle: {
        color: '#ff00ff',
        borderColor: '#ff00ff'
      },
      label: {
        color: '#ffffff'
      }
    }
  },
  visualMap: {
    textStyle: {
      color: '#ffffff'
    },
    inRange: {
      color: ['#00ff88', '#00f3ff', '#ff00ff']
    }
  },
  dataZoom: {
    backgroundColor: 'rgba(26, 31, 58, 0.5)',
    dataBackgroundColor: 'rgba(0, 243, 255, 0.2)',
    fillerColor: 'rgba(0, 243, 255, 0.3)',
    handleColor: '#00f3ff',
    handleSize: '100%',
    textStyle: {
      color: '#8892b0'
    },
    borderColor: '#495670'
  },
  markPoint: {
    label: {
      color: '#ffffff'
    },
    emphasis: {
      label: {
        color: '#ffffff'
      }
    }
  }
}

// 深蓝主题变体
export const techBluTheme = {
  ...techTheme,
  color: [
    '#00ccff',
    '#0099ff',
    '#0066ff',
    '#3399ff',
    '#66ccff',
    '#0088cc',
    '#0055aa',
    '#00aaff'
  ]
}

// 紫色主题变体
export const techPurpleTheme = {
  ...techTheme,
  color: [
    '#cc00ff',
    '#9900ff',
    '#6600ff',
    '#9933ff',
    '#cc66ff',
    '#aa00cc',
    '#7700aa',
    '#dd00ff'
  ]
}
